<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的信用</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">		
	</head>
	<style type="text/css">
		body{overflow-y: auto;}	
	   .mui-content{position: absolute;top: 0;left: 0;height:100%;  background:url(../../../images/service/credit_bg.png)  no-repeat; background-size:100% 180px;}
	   .mui-content .mui-title{color: #fff;}
	   .mui-bar{background: none;}
	   .mui-content{background-color: #fff;}
	   .mui-content .idCard{margin:155px auto 0px auto;}
	   .my_credit_list{position: relative;}
	   .my_credit_list .credit_drive {margin:0 auto;width:100%; height: 180px;}
       .my_credit_list>.credit_label {color: #fff;background: #ff7d26;padding:.01rem .1rem;font-size: .24rem; text-align: center; position: absolute;bottom: 58px;left: 42%;}
       .my_credit .credit_list{padding: 0.3rem 0;}
       .my_credit .credit_list>a{display: inline-block; width: 49%; text-align: center;color: #333; font-size: .3rem}
       .my_credit .credit_list>a>p{margin: 0;}
       .my_credit .credit_list>a:first-child{border-right: 1px solid #dcdcdc}
       .my_credit .credit_list>a>img{display: block; height: .53rem; margin:0 auto .2rem auto;}
       .credit_jl>h3{background-color: #f2f2f5; font-size: .3rem; padding: .3rem;}
       .mui-table-view:before{background:none;}	  
       .mui-table-view-cell{padding: .2rem .3rem; font-size: .3rem}  
       .mui-table-view-cell .jl_title{color: #333;}
       .mui-table-view-cell>.jl_right{position: absolute; right: .3rem; top: .2rem;}
       .mui-bar-transparent{background:rgba(1,148,233,0);}	   
	</style>
	<body>
		<!-- 主体start -->
		<div class="mui-content">		
			<!-- 我的信用start -->
               <div class="my_credit">
                    <div class="my_credit_list">
                        <div id="credit_drive" class="credit_drive"></div>
                        <span class="credit_label">信用较差</span>
                    </div>   
                    <div class="credit_list">
                    	<a id="xygz">
                    		<img src="../../../images/credit/c_ico01.png" />
                    		<p>信用规则解读</p>
                    	</a>
                    	<a id="xypf">
                    		<img src="../../../images/credit/c_ico02.png" />
                    		<p>信用评分来源</p>
                    	</a>                    	
                    </div>
                    <div class="credit_jl">
	                    <h3>我的信用记录</h3>
						<ul class="mui-table-view" id="creditListUl">
						</ul>                      
                    </div>
               </div>   
			<!-- 我的信用end -->
		</div>
		<!-- 主体end -->
	</body>
	<script>
		function my_immersed(immersed){
		}
	</script>
	<script src="../../../js/immersed.js"></script>
	<script src="../../../js/mui.min.js"></script><!-- mui -->
	<script src="../../../js/common.js"></script>
	<script src="../../../js/app.js"></script><!-- 共用rem适配-js -->
	<script src="../../../js/jquery2.2.4.min.js"></script>	<!-- jquery --> 
    <script src="../../../js/echarts.min.js"></script>
    <script type="text/javascript">
    	var countScore = "0";
    	mui.init();
		mui.plusReady(function() {
			loadCreditList();
		});
    	
        /**
		 * 加载数据
		 */
		function loadCreditList() {
			var param = 'userId=' + getUserId();
			var url = 'appHttpService/appQueryNetUserCreditRecord.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					var creditRecordJson = JSON.parse(data.creditRecordJson);
					var mapPara = JSON.parse(data.xwlx);
					var creditHtml = "";
					for(var i in creditRecordJson) {
						creditHtml += " <li class='mui-table-view-cell' id='" + creditRecordJson[i].oid + "_Li'>";
						creditHtml += "<div class='jl_left'>";
						creditHtml += "<p class='jl_title'>"+getStaticParas(mapPara,creditRecordJson[i].behaviorType) +"</p>";
						creditHtml += "<p class='jl_time'>"+creditRecordJson[i].createTime.substring(0,11)+"</p>";
						creditHtml += "</div>";
						creditHtml += "<div class='jl_right'>"+creditRecordJson[i].scoreType+creditRecordJson[i].score +"</div>	";
						creditHtml += "</li>";
					}
					document.getElementById("creditListUl").innerHTML = creditHtml;
					
					countScore = data.countScore;
					//判断等级
					if(countScore > 80){
			        	//极好
			        	$(".credit_label").html("信用极好");
			        }else if(countScore > 60 && countScore <= 80){
			        	//优秀
			        	$(".credit_label").html("信用优秀");
			        }else if(countScore > 40 && countScore <= 60){
			        	//良好
			        	$(".credit_label").html("信用良好");
			        }else if(countScore > 20 && countScore <= 40){
			        	//中等
			        	$(".credit_label").html("信用中等");
			        }else if(countScore > 0 && countScore <= 20){
			        	//较差
			        	$(".credit_label").html("信用较差");
			        }
					
					if(countScore > 100){
						countScore = 100;
					}
					setTimeout(function() {
						loadXyfs();
					}, 1000);
					
					
				}
			}, param);
		};
		
		/**
		 * 加载信用分数
		 */
		function loadXyfs(){
			 // 基于准备好的dom，初始化echarts图表
	        var credit_drive =echarts.init(document.getElementById('credit_drive'));
	        var option = {
	            series: [
	                {
	                    name: '我的信用评分',
	                    type: 'gauge',
	                    min: 0,                     // 最小值
	                    max: 100,                   // 最大值
	                    splitNumber: 5,             // 分割段数，默认为5
	                    axisLine: {            // 坐标轴线
	                        show: true,        // 默认显示，属性show控制显示与否
	                        lineStyle: {       // 属性lineStyle控制线条样式
	                            color: [[0.2, '#fd4100'],[0.4, '#ffb052'],[0.6, '#69c171'],[0.8, '#50cdf6'],[1, '#1d9ff2']],
	                            width:5
	                        }
	                        
	                    },
	        			axisTick: {            // 坐标轴小标记
			                splitNumber: 10,   // 每份split细分多少段
			                length :0,        // 属性length控制线长
			                lineStyle: {       // 属性lineStyle控制线条样式
			                    color: 'auto'
			                }
			            },            
	                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
	                        show: true,
	                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                            color: '#fff'
	                        }
	                    },
	                    splitLine: {           // 分隔线
	                        show: false ,      // 默认显示，属性show控制显示与否
			                length :-25// 属性length控制线长					                
	                    },
	                    pointer: {
	                        length: '85%',
	                        width:3,
	                        color:'#333'                 
	                    },
			            title : {
			                show : true,
			                offsetCenter: [0, '65%'],       // x, y，单位px
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE						                    
			                    color:'#fff',
			                    fontSize:12,
			                    fontFamily:'Microsoft Yahei'
			                }
			            },
			            detail : {
			                formatter:'{value}分',
			                offsetCenter: [0, '65%'],						                
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                    color: 'auto',
			                    fontWeight: 'bold',
			                    color:'#fff',
			                    fontFamily:'Microsoft Yahei',
			                    fontSize:14
			                }
			            },
	                    data: [{value:countScore, name: ''}]
	                }
	            ]
	        };
	        // 为echarts对象加载数据
	        credit_drive.setOption(option);
		}
		
		//通过值查找出静态变量中对应的文字
		function getStaticParas(mapVal,status){
			var val = "";  
			for(var i in mapVal){
				if(i == status){
					val = mapVal[i];  
        			return val;//用false结束循环  
				}
			}
			return val;  
		}
		
		/**
		 * 信用规则解读
		 */
		document.getElementById("xygz").addEventListener('tap',function(){
			showTemplates('credit_rule','信用规则解读','_www/src/my/credit/credit_rule.html');
		})
		
		/**
		 * 信用评分来源
		 */
		document.getElementById("xypf").addEventListener('tap',function(){
			showTemplates('credit_score','信用评分来源','_www/src/my/credit/credit_score.html');
		})
    </script>	
</html>
